<template>
  <div class="mod-config">
    <basic-container>
      <headAssessment
        :sign="{ a: true, b: false, c: false, d: false }"
      ></headAssessment>
      <div class="boxsty zhiBiao">
        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">考核事件录入</div>
        </div>
        <el-form
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="getDataList()"
          class="form-inline"
        >
          <!-- <el-form-item label="所属部门">
            <el-input
              v-model="dataForm.department"
              placeholder="所属部门"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="编号">
            <el-input
              v-model="dataForm.identity"
              placeholder="员工编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="dataForm.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              class="marginLeft"
              @click="getDataList()"
              >检索</el-button
            >
          </el-form-item>
        </el-form>
        <div class="entry">
          <div>
            事件填报
            <el-radio-group v-model="dataForm.module" @change="getDataList()">
              <el-radio label="PERSON">个人</el-radio>
              <el-radio label="DEPT">机构</el-radio>
            </el-radio-group>
          </div>
          <div>
            <el-button
              icon="el-icon-search"
              type="primary"
              style="text-align: right"
              @click="searchBtn"
              >录入事件汇总查询</el-button
            >
            <el-button type="primary" @click="visible = true">创建</el-button>
            <el-button type="primary" @click="batchDelete">批量删除</el-button>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-select
              filterable
              placeholder="导入/导出"
              v-model="value"
              @change="exportImportBtn(value)"
            >
              <el-option label="模板导出" value="1"></el-option>
              <el-option label="模板导入" value="2"></el-option>
            </el-select>
          </div>
        </div>
        <el-table
          :data="dataList"
          v-loading="dataListLoading"
          stripe border
          class="avue-crud"
          height="450px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            prop=""
            label="序号"
            :formatter="nShowIndex"
          ></el-table-column>
          <el-table-column prop="deptName" label="所属部门"></el-table-column>
          <el-table-column prop="identity" label="员工编号"></el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="80"
          ></el-table-column>
          <el-table-column prop="eventCate" label="事件类别"></el-table-column>
          <el-table-column prop="des" label="事件描述"></el-table-column>
          <el-table-column prop="score" label="加扣分值"></el-table-column>
          <el-table-column prop="salary" label="加扣金额"></el-table-column>
          <el-table-column prop="endTime" label="结束时间"> </el-table-column>
          <el-table-column prop="status" label="状态" :formatter="statusFormatter"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                :disabled="scope.row.jjFfzt === '已发放'"
                v-if="permissions.jiangjin_jiangjingrjcjlb_edit"
                type="primary"
                plain
                @click="addOrUpdateHandle(scope.row.id)"
                >编辑</el-button
              >
              <el-button
                :disabled="scope.row.jjFfzt === '已发放'"
                v-if="permissions.jiangjin_jiangjingrjcjlb_del"
                type="danger"
                plain
                @click="deleteHandle(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
    </basic-container>
    <batchEntryDialog
      v-if="visible"
      :visible="visible"
      @close="closeDialog"
    ></batchEntryDialog>
    <edit
      v-if="editVisible"
      :visible="editVisible"
      :id="id"
      :module="dataForm.module"
      @close="editVisible = false"
      @save="editSave"
    ></edit>
  </div>
</template>

<script>
import {
  getAssessmentEventPage,
  del,
  submitAssessmentEventStatus,
  updateById,
} from "@/api/assessment/event";
import { mapGetters } from "vuex";
import batchEntryDialog from "./batchEntryDialog.vue";
import edit from "./edit.vue";
export default {
  data() {
    return {
      editVisible: false,
      id: null,
      visible: false,
      value: "",
      dataForm: {
        module: "PERSON",
        status: 0,
      },
      dataList: [],
      multipleSelection: [], //选择的人
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      radio: "1",
    };
  },
  components: {
    batchEntryDialog,
    edit,
  },
  created() {
    this.getDataList();
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    editSave(form) {
      updateById(form).then((res) => {
        this.editVisible = false;
      });
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      getAssessmentEventPage(
        Object.assign(
          {
            current: this.pageIndex,
            size: this.pageSize,
          },
          this.dataForm
        )
      )
        .then((response) => {
         //console.log(response.data.data.records);
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total;
        })
        .finally(() => (this.dataListLoading = false));
    },
    closeDialog() {
      this.visible = false;
      this.getDataList();
    },
    //个人机构  radio
    searchBtn() {
      this.$router.push({ path: "/assessment-event/form/stat" });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 删除
    deleteHandle(id) {
      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        del([id]).then((res) => {
          this.$notify.success("删除成功");
          this.getDataList();
        });
      });
    },
    // 批量删除
    batchDelete() {
      if (this.multipleSelection.length < 1) {
        this.$message.warning("请勾选所要删除的数据");
      } else {
        del(this.multipleSelection.map((v) => v.id)).then((res) => {
          this.$message.success("删除成功");
          this.getDataList();
        });
      }
    },
    addOrUpdateHandle(id) {
      this.id = id;
      this.editVisible = true;
    },
    // 提交
    submit() {
      if (this.multipleSelection.length < 1) {
        this.$message.warning("请勾选所要提交的数据");
      } else {
        let ids = this.multipleSelection.map((v) => v.id);
        submitAssessmentEventStatus({ ids, status: 1 }).then((res) => {
          this.getDataList();
          this.$message.success("提交成功");
        });
      }
    },
    // 导出导入
    exportImportBtn(val) {
      if (val == 1) {
        this.$message.success("导出");
      } else {
        this.$message.success("导入");
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    statusFormatter(row, column, cellValue, index) {
      if (cellValue == 0) {
        return "未提交";
      } else if (cellValue == -1) {
        return "不通过";
      } else if (cellValue == 1 || cellValue == 2) {
        return "已提交";
      } else if (cellValue == 3) {
        return "通过";
      }
    },
    nShowIndex(row, column, cellValue, index) {
      return index + 1;
    },
  },
};
</script>
<style>
.entry {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.b_bottom {
  border: 1px solid #797979;
}
.b_bottom div {
  border-left: 1px solid #797979;
  font-size: 20px;
  line-height: 40px;
  height: 40px;
  text-align: center;
}
.b_bottom .el-input--small .el-input__inner {
  border: 0px;
  border-radius: 0px;
  background: linear-gradient(45deg, #fff, #fff);
  font-size: 14px;
  color: #0e258c;
  overflow: hidden;
}
</style>
